<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询商品</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
    <link rel="stylesheet" href="../resources/css/index.css">
    <script type="text/javascript" src="../resources/jquery/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="../resources/js/common.js"></script>

</head>
<body>
    <div id="itemAddApp">
        <el-dialog title="选择商品类别" v-model="dialogFormVisible">
            <el-tree
                    :data="itemCatTree"
                    accordion
                    @node-click="handleNodeClick">
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>

        <el-row>
            <el-col>
                <el-form :model="itemAddForm" :rules="rules" ref="itemAddForm"  label-width="100px" class="demo-ruleForm">

                    <el-form-item label="商品类目" prop="type">
                        <el-button @click="dialogFormVisible = true">请选择类目</el-button>
                        <span>{{itemAddForm.itemType.label}}</span>
                    </el-form-item>
                    <el-form-item label="商品名称" prop="name">
                        <el-input v-model="itemAddForm.name" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="商品卖点" prop="sellPoint">
                        <el-input type="textarea" v-model="itemAddForm.sellPoint"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="price">
                        <el-input type="number" v-model="itemAddForm.price" placeholder="请输入价格"></el-input>
                    </el-form-item>
                    <el-form-item label="库存数量" prop="num">
                        <el-input type="number" v-model="itemAddForm.num" placeholder="请输入库存量"></el-input>
                    </el-form-item>
                    <el-form-item label="条形码" prop="barcode">
                        <el-input v-model="itemAddForm.barcode" ></el-input>
                    </el-form-item>
                    <el-form-item label="商品图片">
                        <el-upload
                                class="upload-demo"
                                action="/images/"
                        >
                                <!--
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :file-list="fileList"
                                -->
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>

                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm('itemAddForm')">立即创建</el-button>
                        <el-button @click="resetForm('itemAddForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>


    </div>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">
    var itemAddVm = new Vue({
        el:'#itemAddApp',
        data:{
            itemCatTree:[],
            itemAddForm: {
                itemType:{},
                name: '',
                sellPoint:'',
                num:0,
                barcode:'',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                resource: '',
                desc: ''
            },
            dialogFormVisible: false,
            rules: {
                name: [
                    { required: true, message: '请输入商品名称', trigger: 'change' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            },
            submitForm(formName) {
                this.$refs['itemAddForm'].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //itemCat tree 节点点击
            handleNodeClick(node) {
                itemAddVm.$data.itemAddForm.itemType=node;
                itemAddVm.$data.dialogFormVisible = false;
            },
            handlePreview(){},
            handleRemove(){},

        }
    });
    //加载类型树
    getItemCatTree(itemAddVm.$data.itemCatTree);
</script>
</body>
</html>